<template>
  <div
    class="w-spinner"
    v-if="value || value === undefined"
    :class="classes"
    :style="styles"
  >
    <span v-if="isThreeDots"></span>
  </div>
</template>

<script>
import { computed } from "vue";
export default {
  name: "w-spinner",
  props: {
    value: {},
    color: { type: String, default: "primary" },
    xs: { type: Boolean },
    sm: { type: Boolean },
    md: { type: Boolean },
    lg: { type: Boolean },
    xl: { type: Boolean },
    size: { type: [Number, String] },
    bounce: { type: Boolean },
    fade: { type: Boolean }
  },

  emits: [],
  setup(props, ctx) {
    const isThreeDots = computed(() => {
      return !props.bounce && !props.fade;
    });
    const forcedSize = computed(() => {
      return (
        props.size && (!isNaN(props.size) ? `${props.size}px` : props.size)
      );
    });
    const presetSize = computed(() => {
      return (
        (props.xs && "xs") ||
        (props.sm && "sm") ||
        (props.md && "md") ||
        (props.lg && "lg") ||
        (props.xl && "xl") ||
        null
      );
    });
    const styles = computed(() => {
      return (forcedSize.value && `font-size: ${forcedSize.value}`) || null;
    });
    const classes = computed(() => {
      return {
        [props.color]: props.color,
        [`size--${presetSize.value}`]: presetSize.value && !forcedSize.value,
        "w-spinner--bounce": props.bounce,
        "w-spinner--fade": props.fade,
        "w-spinner--three-dots": isThreeDots.value
      };
    });

    return {
      isThreeDots,
      forcedSize,
      presetSize,
      styles,
      classes
    };
  }

};
</script>
